<script setup lang="ts">
import {IconColor, IconType} from "@/components/IconFont/type";
import IconFont from "@/components/IconFont/IconFont.vue";
import {Honey} from "@/modal/Beehive";
import type {Reactive} from "vue";

interface iHoney {
  honey: Reactive<Honey>;
}

const props = defineProps<iHoney>();
const honey = props.honey;
const growUp = () => {
  emits('emitGrowUp', honey)
}
const emits = defineEmits(['emitGrowUp'])
</script>

<template>
  <div class="honey-type col-12 h-100">
    <div v-for="(steps,index) in honey.productRipen"
         @click="growUp"
         class="honey-item">
      <div class="item-step">
        <icon-font
          :icon-type="IconType.HONEY"
          :color="steps > honey.selfStep? IconColor.FLOWER_PASSIVE:IconColor.BEEHIVE"
          font-size="xx-large">
        </icon-font>
      </div>
      <div class="award-content">
        <template v-if="honey.awardStep(steps)">
          <div class="award-icon">
            <icon-font
              :icon-type="IconType.SCORE"
              :number="honey.showScore(steps)"
              :color="IconColor.SCORE"
              font-size="x-large">
            </icon-font>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.honey-type {
  display: flex;
  flex-direction: column-reverse;
}

.honey-item {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 4px;
}

.item-step {
  position: relative;
  top: -14px;
  left: -4px;
}

.award-content {
  position: absolute;
  left: -40px;
  top: calc(-50% + 3px);
}

.award-icon {
  position: absolute;
}

.award-icon:last-child {
  left: 66px;
}
</style>